<template>
  <uni-popup ref="redemptionPopup" type="bottom" class="redemptionPopup">
    <view class="popupContent">
      <view class="popupContentTitle">
        <text style="font-size: 32rpx; font-weight: bold; color: #fff"
          >{{ $t('mining.text12') }}{{ tokenName }}</text
        >
        <uni-icons type="closeempty" @click="closePopup"></uni-icons>
      </view>

      <view class="balance">
        <text>{{ $t('mining.text13') }}</text>
        <text>{{ balance }} {{ tokenName }} </text>
      </view>

      <view class="pledgeInput">
        <input v-model="pledgeInputNum" />

        <view>
          <text style="margin-right: 30rpx; font-weight: bold">{{ tokenName }}</text>
          <text style="color: #2f7cf7; font-weight: bold" @click="pledgeInputNum = balance">{{
            $t('mining.text7')
          }}</text>
        </view>
      </view>

      <view class="btnBox">
        <view class="btn" style="background: #343e4d" @click="closePopup">{{
          $t('mining.text8')
        }}</view>
        <view class="btn" style="background: #2f7cf7" @click="redemption">{{
          $t('mining.text12')
        }}</view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
import { pledgeAmount, redeem } from '../../common/apiString.js';

export default {
  data() {
    return {
      tokenName: '',
      pledgeInputNum: '',
      balance: 0,
      productId: ''
    };
  },

  methods: {
    closePopup() {
      this.$refs.redemptionPopup.close();
      this.pledgeInputNum = '';
    },
    currencyDetail(e) {
      let dto = {
        productId: this.productId,
        pledgeCoin: this.tokenName
      };
      this.$utils.initDataToken({ url: pledgeAmount, data: dto, type: 'get' }, res => {
        this.balance = res;
      });
    },
    redemption() {
      if (!this.pledgeInputNum || this.pledgeInputNum == 0) return;
      // if (Number(this.pledgeInputNum) > Number(this.balance)) {
      //   this.$utils.showLayer(this.$t('bico.W473'));
      //   return;
      // }

      this.$utils.initDataToken(
        {
          url: redeem,
          data: {
            productId: this.productId,
            pledgeCoin: this.tokenName,
            pledgeNum: this.pledgeInputNum
          },
          type: 'POST'
        },
        (res, msg) => {
          this.$utils.showLayer(this.$t('mining.text11'));
          this.$root.getProductList();
          this.closePopup();
        }
      );
    }
  }
};
</script>

<style lang="less" scoped>
.redemptionPopup {
  width: 100vw;
  .popupContent {
    height: 734rpx;
    border-radius: 50rpx 50rpx 0rpx 0rpx;
    background: #1f282f;
    padding: 40rpx 30rpx;
    .popupContentTitle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .uni-icons {
        color: #fff !important;
        font-size: 32rpx;
        font-weight: bold;
      }
    }

    .tips {
      margin-top: 72rpx;
      text-align: center;
      font-size: 28rpx;
      color: #979797;
      font-weight: bold;
    }

    .balance {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 72rpx;
      text {
        font-size: 28rpx;
        font-weight: bold;
        color: #fff;
      }
    }
    .pledgeInput {
      padding: 0 34rpx;
      margin-top: 22rpx;
      height: 100rpx;
      background: #171f24;
      border-radius: 8rpx;
      border: 2rpx solid #475864;
      display: flex;
      justify-content: space-between;
      align-items: center;
      /deep/ input {
        height: 100%;
        font-weight: bold;
        font-size: 32rpx;
        color: #888888 !important;
      }
      /deep/ .uni-input-input {
        color: #888888 !important;
      }

      text {
        font-size: 32rpx;
        color: #888888;
      }
    }

    .btnBox {
      margin-top: 126rpx;
      display: flex;
      justify-content: space-between;
      .btn {
        width: 338rpx;
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 12rpx;
        text-align: center;
        color: #fff;
        font-weight: bold;
        font-size: 32rpx;
      }
    }
  }
}
</style>
